<template>
  <div class="home">
    <van-tabs sticky offset-top="0" color="red" background="#f6f6f6">
      <van-tab :title="item" v-for="item in tabName">
        <!-- 推荐 -->
        <div class="item recommend" v-if="item == '推荐'">
          <div class="banner">
            <van-swipe autoplay="3000">
              <van-swipe-item
                v-for="(banner, indexs) in homeList[0]?.children"
                :key="indexs"
                ><van-image
                  radius="10rem"
                  width="100%"
                  height="200rem"
                  :src="banner.model.cover"
                />
                <p class="bannertitle">{{ banner.model.title }}</p>
                <!-- <h3 class="bannertext">春节影视</h3> -->
                <!-- <p class="bannertitle">春节必追</p> -->
              </van-swipe-item>

              <template #indicator="{ active, total }">
                <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
              </template>
            </van-swipe>
          </div>

          <div class="recommendList">
            <div
              class="recommendbox"
              v-for="(recommend, index) in recommendList"
            >
              <div
                class="recommenditem"
                v-for="(item, index) in recommend"
                :key="index"
              >
                <RecommendItem
                  v-if="item.type === 'uiMiddleCard'"
                  :itemData="item.children[0].model"
                />
                <CardItem
                  v-if="
                    item.type === 'uiBigCard' || item.type === 'uiBigCardTop'
                  "
                  :itemData="item.children[0].model"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 精选 -->
        <div class="item selected" v-else-if="item == '精选'">
          <div class="top">
            <h3>今日精选</h3>
          </div>
          <div class="list">
            <HotItem
              v-for="(selection, index) in section"
              :key="index"
              :selection="selection.children[0].model"
            />
          </div>
        </div>

        <!-- 热门 -->
        <div class="item hot" v-else-if="item == '热门'">
          <div class="banner">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item v-for="hotbanner in hotBanners">
                <!-- <img :src="hotbanner.model.cover" alt="" /> -->
                <van-image
                  width="351rem"
                  radius="10rem"
                  height="197rem"
                  :src="hotbanner.model.cover"
                />
              </van-swipe-item>
            </van-swipe>
          </div>

          <div class="sort">
            <div v-for="sort in uiFunction">
              <img :src="sort.model.icon" alt="" />
              <p>{{ sort.model.title }}</p>
            </div>
          </div>
          <div class="list">
            <HotItem
              v-for="(hot, index) in hotList"
              :key="index"
              :selection="hot.children[0].model"
            />
          </div>
        </div>

        <!-- 旅拍 -->
        <div class="item travel" v-else-if="item == '旅拍'">
          <div class="banner">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item
                v-for="(banner, indexs) in travelBanner"
                :key="indexs"
                ><van-image
                  radius="10rem"
                  width="100%"
                  height="200rem"
                  :src="banner.model.cover"
                />
                <p class="bannertitle">
                  {{ banner.model.title }}
                </p></van-swipe-item
              >
              <template #indicator="{ active, total }">
                <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
              </template>
            </van-swipe>
          </div>
          <div class="list">
            <HotItem
              v-for="(travel, index) in travel"
              :key="index"
              :selection="travel.children[0].model"
            />
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import RecommendItem from "../components/RecommendItem.vue";
import CardItem from "../components/CardItem.vue";
import HotItem from "../components/HotItem.vue";
import { getRecommend, getSelected, getTravel } from "../api/index";
import { useHotStore } from "../stores/index.js";
import { storeToRefs } from "pinia";


const store = useHotStore();
const { hotBanners, uiFunction, hotList } = storeToRefs(store);
const { getHotListData } = store;
getHotListData();
t

const active = ref(0);
const activeName = ref("a");
const tabName = ref(["推荐", "精选", "热门", "旅拍"]);
const router = useRouter();


//推荐
const homeList = ref([]);
const recommendList = ref([]);

getRecommend().then((res) => {
  // console.log(res);
  homeList.value = res.data.data.children;
  recommendList.value = homeList.value.filter(
    (item) =>
      item.type == "uiMiddleCard" ||
      item.type == "uiBigCardTop" ||
      item.type == "uiBigCard"
  );

  recommendList.value = new Array(Math.ceil(recommendList.value.length / 5))
    .fill(null)
    .map((o, i) => recommendList.value.slice(i * 5, (i + 1) * 5));
  console.log(homeList.value);
  // console.log(recommendList.value);
});

//精选
const section = ref([]);
getSelected().then((res) => {
  section.value = res.data.data.children.filter((o, index) => index > 0);
  // console.log(section.value);
  // console.log(section.value);
});

//旅拍
const travel = ref([]);
const travelBanner = ref([]);
getTravel().then((res) => {
  travel.value = res.data.data.children.filter((o, index) => index > 0);
  travelBanner.value = res.data.data.children.filter(
    (o, index) => index == 0
  )[0].children;
  // console.log(travel.value);
  // console.log(travelBanner.value);
});




</script>

<style lang="scss" scoped>
.home {
  background-color: #f6f6f6;
  padding: 0 12rem 70rem;

  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 14rem;
    background: rgba(0, 0, 0, 0.1);
    color: white;
  }
  .item {
    margin-top: 10rem;
    .recommendbox {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      margin-right: 5rem;
      &:nth-child(2n) {
        margin-right: 0;
      }
      &:nth-child(5n) {
        margin-right: 0;
      }
      
    }
    .recommenditem {
      .recommend {
        margin-top: 10rem;
      }
    }
  }
  .recommend {
    .banner {
      border-radius: 10rem;
      overflow: hidden;
      .van-swipe-item {
        position: relative;
        .bannertitle {
          font-size: 14rem;
          color: #fff;
          font-weight: bold;
          position: absolute;
          bottom: 10rem;
          left: 20rem;
        }
      }
    }
  }
  .selected {
    .top {
      h3 {
        font-size: 18rem;
        color: #000;
        font-weight: bold;
        padding-bottom: 12rem;
      }
    }
    .carditem {
      margin-bottom: 10rem;
    }
  }
  .hot {
    .banner {
      // padding: 15rem;
      // background-color: #fff;
      border-radius: 10rem;
      overflow: hidden;
      .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        // line-height: 150px;
        text-align: center;
        // background-color: #39a9ed;
      }
    }
    .sort {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rem;
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 40rem;
          height: 40rem;
          border-radius: 50%;
        }
        p {
          font-size: 14rem;
          color: #000;
          margin-top: 10rem;
        }
      }
    }
    .carditem {
      margin-bottom: 10rem;
    }
  }
  .travel {
    .banner {
      // padding: 15rem;
      // background-color: #fff;
      margin-bottom: 15rem;

      .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20rem;
        // line-height: 150rem;
        text-align: center;
        // background-color: #39a9ed;
      }
    }
    .carditem {
      margin-bottom: 10rem;
    }
    .van-swipe-item {
      position: relative;
      .bannertitle {
        font-size: 14rem;
        color: #fff;
        font-weight: bold;
        position: absolute;
        bottom: 10rem;
        left: 20rem;
      }
    }
  }
  .recommendList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
}
</style>